{% extends "base.html" %}

{% block title %}首页 - 剪藏应用{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-filter"></i> 筛选</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="categoryFilter" class="form-label">分类</label>
                    <select class="form-select" id="categoryFilter" onchange="filterCollections()">
                        <option value="">所有分类</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="sourceFilter" class="form-label">来源</label>
                    <select class="form-select" id="sourceFilter" onchange="filterCollections()">
                        <option value="">所有来源</option>
                        <option value="微信">微信</option>
                        <option value="微博">微博</option>
                        <option value="知乎">知乎</option>
                        <option value="B站">B站</option>
                        <option value="GitHub">GitHub</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5><i class="fas fa-tags"></i> 标签云</h5>
            </div>
            <div class="card-body" id="tagCloud">
                <!-- 标签将在这里动态加载 -->
            </div>
        </div>
    </div>
    
    <div class="col-md-9">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="fas fa-bookmark"></i> 我的收藏</h2>
            <div>
                <button class="btn btn-primary" onclick="showAddModal()">
                    <i class="fas fa-plus"></i> 添加收藏
                </button>
            </div>
        </div>
        
        <div id="collectionsList">
            <!-- 收藏列表将在这里动态加载 -->
            <div class="text-center">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <nav aria-label="收藏分页" class="mt-4">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 分页按钮将在这里动态生成 -->
            </ul>
        </nav>
    </div>
</div>
{% endblock %}

